<template>
    <div class="footer">
        <div class="company-wrapper">
            <div class="inline-wrapper">
                <span class="title">相关产品</span>
                <a href="//data.zsdx.cn">掌上易数</a>
                <a href="//wxhand.com">微信管理系统</a>
                <a href="//520.zsdx.cn">表白墙</a>
            </div>
            <!-- <div class="inline-wrapper">
                <span class="title">友情链接</span>
                <a href="//www.kolstore.com/">领库</a>
                <a href="https://yiban.io/">壹伴</a>
                <a href="https://xmt.cn/index">新媒体管家</a>
            </div> -->
            <div class="inline-wrapper">
                <span class="title">相关文档</span>
                <a
                    href="//cdn.zsdx.cn/zsdx-website/2020/file/LegalStatement_0630.pdf"
                    >知识产权</a
                >
                <a
                    href="//cdn.zsdx.cn/zsdx-website/2020/file/PrivacyPolicy_0630.pdf"
                    >隐私条款</a
                >
                <a href="//cdn.zsdx.cn/zsdx-website/2020/file/agree_0630.pdf"
                    >注册协议</a
                >
            </div>
            <div
                class="contact-wrapper"
                style="margin: 0.2rem 0.15rem 0.14rem;"
            >
                <p class="title">联系我们</p>
                <p class="address" style="margin-top: 0;">
                    电话：13175081185
                </p>
                <p class="address">
                    邮箱：service@zsdx.cn
                </p>
                <p class="address">
                    地址：杭州市滨江区阿里中心2栋301、302室
                </p>
                <p class="address">
                    投诉：yu@zsdx.cn
                </p>
                <div class="qrcode-wrapper">
                    <div class="qrcode">
                        <img
                            src="//cdn.zsdx.cn/zsdx-website/2020/images/common/qr_zx2.jpg"
                            alt=""
                        />
                        <p>疑问咨询</p>
                    </div>
                    <div class="qrcode">
                        <img
                            src="//cdn.zsdx.cn/wei/images/hire/qr_zd.jpg"
                            alt=""
                        />
                        <p>关注我们</p>
                    </div>
                </div>
            </div>
            <div class="copyright-wrapper">
                <p>浙ICP备13021479号-8<br />浙公安网备 33010802007371号</p>
                <p>
                    杭州新麦科技有限公司版权所有<br />Copyright @ 2012-2020
                    XinMai All Rights Reserved
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Footer',
    data() {
        return {}
    }
}
</script>

<style lang="less" scoped>
.company-wrapper {
    background-color: #030e1f;
}
.inline-wrapper {
    padding: 0.3rem 0 0 0.54rem;
    font-size: 0;
    .title {
        position: relative;
        margin-right: 0.4rem;
        font-size: 0.28rem;
        color: #fff;
        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -0.24rem;
            transform: translate(0, -50%);
            width: 0.08rem;
            height: 0.08rem;
            background: linear-gradient(
                180deg,
                rgba(12, 164, 250, 1) 0%,
                rgba(5, 107, 242, 1) 100%
            );
        }
    }
    a {
        display: inline-block;
        font-size: 0.28rem;
        color: rgba(255, 255, 255, 0.8);
        & + a {
            margin-left: 0.2rem;
            padding-left: 0.2rem;
            border-left: 1px solid rgba(216, 216, 216, 0.3);
        }
    }
}
.contact-wrapper {
    margin: 0.4rem 0.3rem 0.48rem;
    padding: 0.4rem 0.74rem 0.4rem 0.24rem;
    line-height: 0.4rem;
    color: rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    .title {
        position: relative;
        margin-right: 0.4rem;
        margin-bottom: 0.4rem;
        font-size: 0.28rem;
        padding-left: 0.2rem;
        color: #fff;
        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -0.1rem;
            transform: translate(0, -50%);
            width: 0.08rem;
            height: 0.08rem;
            background: linear-gradient(
                180deg,
                rgba(12, 164, 250, 1) 0%,
                rgba(5, 107, 242, 1) 100%
            );
        }
    }
    .address-wrapper {
        .address {
            margin-top: 0.1rem;
        }
    }
    .address {
        margin-top: 0.2rem;
    }
    .qrcode-wrapper {
        margin-top: 0.5rem;
        text-align: center;
        .qrcode {
            display: inline-block;
            & + .qrcode {
                margin-left: 0.74rem;
            }
            img {
                width: 2rem;
                height: 2rem;
            }
        }
    }
}
.copyright-wrapper {
    padding-bottom: 0.5rem;
    font-size: 0.28rem;
    line-height: 0.4rem;
    text-align: center;
    color: #d8d8d8;
    p {
        & + p {
            margin-top: 0.16rem;
        }
    }
}
</style>
